<template>
    <div class="box" :style="{'height':tableHeight}">
        <Form :model="search" :label-width="80">
            <div class="table-top-wrap">
                <div>
                    <div>
                        <Button v-if="isAddBtn" class="features-btn" @click="handleBtnClick(null,'add')">
                            <Icon type="md-add" size="18" />新建
                        </Button>
                        <!-- <Button v-if="isDelete" class="features-btn btn-auto-m" @click="handleBtnClick(null,'delete')">
                            <Icon type="md-trash" size="17" />删除
                        </Button>-->
                    </div>
                </div>
                <div class="table-top-wrap-bottom">
                    <div>
                        <input type="text" class="style-input" @keyup.enter="handleSearch" v-model="search.keyword" placeholder="请输入信息" />
                        <i-input style="display:none"></i-input>
                    </div>
                    <div>
                        <Button icon="ios-search" @click="handleSearch" class="search-btn">搜索</Button>
                    </div>
                </div>
            </div>
        </Form>
        <div class="table-container">
            <div class="imglist">
                <ul>
                    <li style="width: 240px;" v-for="(item,index) in list" :key="index">
                        <div class="details">
                            <div class="pic">
                                <img :src="item.Picture" style="display: inline;width:100%" />
                            </div>
                            <i class="absbg"></i>
                            <h1>
                                <span :title="item.Title">{{item.Title}}</span>
                            </h1>
                            <div class="remark" :title="item.ShortDes">{{item.ShortDes}}</div>
                            <div class="tools">
                                <p style="float:left;font-size:20px">
                                    <Icon v-if="item.IsTop" type="md-arrow-round-up" />
                                    <Icon v-else type="md-arrow-round-down" />
                                </p>

                                <p style="float:left;font-size:20px">
                                    <Icon v-if="item.IsFlash" type="ios-sunny" />
                                    <Icon v-else type="ios-sunny-outline" />
                                </p>
                                <p style="float:right;color:red;font-size:14px;line-height:35px">{{item.ViewCount}}</p>
                            </div>
                            <div class="foot">
                                <p class="time">{{item.LastModifyTime}}</p>
                                <p style="float:right;font-size:20px;line-height:20px;cursor:pointer; ">
                                    <Icon type="md-trash" v-if="isDelete" @click="handleBtnClick(item,'delete') " />&nbsp;
                                    <Icon type="md-create" v-if="isEdit" @click="handleBtnClick(item, 'edit')" />
                                </p>

                                <!-- <a href="news_add.aspx?action=Edit&amp;id=1" title="编辑" class="edit">编辑</a> -->
                            </div>
                        </div>
                    </li>
                </ul>
            </div>
        </div>
        <page :current="search.pageindex" :loading="loading" @changePage="handleChangePage" :total="total"></page>
        <Modal :mask-closable="false" v-model="isModal" :title="ModalTitle" width="800">
            <div v-if="isModal">
                <Form ref="formItem" :model="formItem" :rules="ruleValidate" :label-width="100">
                    <Row>
                        <i-col :lg="{ span: 24}">
                            <FormItem label="新闻名称" prop="Title">
                                <i-input v-model="formItem.Title" placeholder="请输入新闻名称"></i-input>
                            </FormItem>
                        </i-col>
                        <i-col :lg="{ span: 24}">
                            <FormItem label="栏目" prop="Ntype">
                                <Select v-model="formItem.Ntype" placeholder="请选择栏目">
                                    <Option v-for="item in ntypeList" :value="item.ID  " :key="item.ID">{{ item.Dname }}</Option>
                                </Select>
                            </FormItem>
                        </i-col>
                        <i-col :lg="{ span: 24}">
                            <FormItem label="浏览量" prop="ViewCount">
                                <i-input type="number" v-model="formItem.ViewCount" placeholder="请输入浏览量"></i-input>
                            </FormItem>
                        </i-col>

                        <i-col :lg="{ span: 8}">
                            <FormItem label="是否置顶">
                                <RadioGroup v-model="formItem.IsTop">
                                    <Radio label="true">是</Radio>
                                    <Radio label="false">否</Radio>
                                </RadioGroup>
                            </FormItem>
                        </i-col>
                        <i-col :lg="{ span: 8}">
                            <FormItem label="是否热门">
                                <RadioGroup v-model="formItem.IsFlash">
                                    <Radio label="true">是</Radio>
                                    <Radio label="false">否</Radio>
                                </RadioGroup>
                            </FormItem>
                        </i-col>
                        <i-col :lg="{ span: 8}">
                            <FormItem label="首页显示">
                                <RadioGroup v-model="formItem.InMain">
                                    <Radio label="true">是</Radio>
                                    <Radio label="false">否</Radio>
                                </RadioGroup>
                            </FormItem>
                        </i-col>
                        <i-col :lg="{ span: 24}">
                            <FormItem label="新闻图片">
                                <img-upload
                                    v-if="isImg"
                                    :defaultList="imgDefaultList.Picture"
                                    @delImgList="delImgList"
                                    :multiple="false"
                                    :data="{directory:'NewsPath'}"
                                    :check="1"
                                    :value="'Picture'"
                                    @setImgLIst="setImgLIst"
                                ></img-upload>
                            </FormItem>
                        </i-col>
                        <i-col :lg="{ span: 24}">
                            <FormItem label="内容">
                                <editor ref="editor" :value="content" @on-change="handleChange" />
                            </FormItem>
                        </i-col>
                        <i-col :lg="{ span: 24}">
                            <FormItem label="简述" prop="ShortDes">
                                <i-input type="textarea" v-model="formItem.ShortDes" placeholder="请输入简述"></i-input>
                            </FormItem>
                        </i-col>
                    </Row>
                </Form>
            </div>
            <div slot="footer">
                <Button size="large" @click="handleClose">取消</Button>
                <Button type="primary" size="large" @click="handleSubmit('formItem')">确定</Button>
            </div>
        </Modal>
    </div>
</template>

<script>
/**
 * 信息列表
 */
import { cyclicRouting, getdate } from '@/util'

import { getModulePermission } from '@/api/user'
import {
    getTablesList,
    addTablesItem,
    deleteItem,
    getItemInfo,
    getNtype
} from './service'
import Editor from '@/components/Editor'
import page from '@/components/Page'
import ImgUpload from '@/components/ImgUpload'

export default {
    name: 'OrganizationShop',
    components: {
        Editor,
        ImgUpload,
        page
    },
    data() {
        return {
            allSelectArr: null,
            isAddBtn: false,
            isProhibit: false,
            isEdit: false,
            isImg: true,
            isModal: false,
            isDelete: false,
            ModalTitle: '新建信息',
            ntypeList: [],
            itemId: 0,
            loading: true,
            formItem: this.initFormItem(),
            imglist: {
                Picture: []
            },
            imgDefaultList: {
                Picture: []
            },
            ruleValidate: this.initRuleValidate(),
            content: '',
            total: 0,
            list: [],
            search: {
                keyword: '',
                pageindex: 1,
                pagesize: 10
            }
        }
    },
    computed: {
        tableHeight() {
            if (this.height) {
                return this.height
            } else {
                return window.innerHeight - 240
            }
        }
    },
    mounted() {
        /* 获取菜单的id */
        cyclicRouting(
            JSON.parse(sessionStorage.getItem('user')).menuList,
            this.$route,
            id => {
                /* 按钮权限请求 */
                getModulePermission({
                    roleid: JSON.parse(sessionStorage.getItem('user')).roleid,
                    moduleid: id
                }).then(res => {
                    /* 按钮权限赋值 */
                    for (let item in res.data) {
                        if (res.data[item].name == 'add') {
                            this.isAddBtn = true
                        } else if (res.data[item].name == 'edit') {
                            this.isEdit = true
                        } else if (res.data[item].name == 'delete') {
                            this.isDelete = true
                        } else if (res.data[item].name == 'edit') {
                            this.isEdit = true
                        }
                    }
                    /* 列表请求 */
                    this.getTablesListData()
                    getNtype({
                        parentname: '栏目'
                    }).then(res => {
                        this.ntypeList = res.data.rows
                    })
                })
            }
        )
    },
    methods: {
        /* 表格搜索 */
        handleSearch() {
            this.loading = true
            this.getTablesListData()
        },
        /* 字典选择 */
        setDictionaries(item, value) {
            this.formItem[value] = item
        },
        setImgLIst(list, value, width, height) {
            this.imglist[value] = list
            this.formItem.imgw = width
            this.formItem.imgh = height
        },
        /* 关闭对话框 */
        handleClose() {
            this.isModal = false
        },
        handleChange(html) {
            this.formItem.Detail = html
        },
        /* 图片删除 */
        delImgList(list, value, width, height) {
            this.imglist[value] = list
        },
        /* 复选框选中 */
        handleAllSelect(list) {
            let arr = []
            for (let item in list) {
                arr.push(list[item].ID)
                arr.join(',')
            }
            arr = arr.join(',')
            this.allSelectArr = arr
        },
        /* 提交 */
        handleSubmit(name) {
            this.$refs[name].validate(valid => {
                if (valid) {
                    const { Picture } = this.imglist
                    const { Ntype } = this.formItem

                    if (!Picture) {
                        this.$Message.error('请上传图片')
                        return
                    }
                    if (!Ntype) {
                        this.$Message.error('请选择栏目')
                        return
                    }

                    this.formItem.Picture = Picture[0].url
                    this.formItem.ViewCount = parseInt(this.formItem.ViewCount)
                    let data = this.formItem
                    if (data.InMain == 'true') {
                        data.InMain = true
                    } else {
                        data.InMain = false
                    }
                    if (data.IsFlash == 'true') {
                        data.IsFlash = true
                    } else {
                        data.IsFlash = false
                    }
                    if (data.IsTop == 'true') {
                        data.IsTop = true
                    } else {
                        data.IsTop = false
                    }

                    addTablesItem(data).then(res => {
                        if (res.state == 'success') {
                            this.$Message.success('操作成功')
                            this.loading = true
                            this.isModal = false
                            this.getTablesListData()
                        } else {
                            this.$Message.error(res.message)
                        }
                    })
                }
            })
        },
        /* 表格数据请求 */
        getTablesListData() {
            const data = this.search
            getTablesList(data).then(res => {
                this.list = res.data.rows
                this.loading = false
                this.total = res.data.records
            })
        },
        /* 表格分页方法 */
        handleChangePage(type, page) {
            this.loading = true
            if (type == 'page') {
                this.search.pageindex = page
                this.getTablesListData()
            } else {
                this.search.pagesize = page
                this.getTablesListData()
            }
        },
        /* 对话框 */
        handleBtnClick(item, type) {
            this.ModalTitle = '新建信息'
            this.formItem = this.initFormItem()
            if (type == 'edit' || type == 'add') {
                this.content = ' '
                this.formItem.Detail = ' '
                this.itemId = 0
                this.isModal = true
                this.imgDefaultList.Picture = []
                this.imglist.Picture = []
                if (type == 'edit') {
                    this.isImg = false
                    this.ModalTitle = '修改信息'
                    this.imgDefaultList.Picture = []
                    getItemInfo({
                        id: item.ID
                    }).then(res => {
                        this.itemId = item.ID
                        this.formItem = {
                            ...res.data,
                            InMain: res.data.InMain + '',
                            IsFlash: res.data.IsFlash + '',
                            IsTop: res.data.IsTop + ''
                        }
                        this.imgDefaultList.Picture.push({
                            url: res.data.Picture
                        })
                        this.imglist.Picture.push({
                            url: res.data.Picture
                        })

                        this.$refs.editor.setHtml(res.data.Detail)
                        this.isImg = true
                    })
                }
            } else if (type === 'delete') {
                if (item.ID) {
                    this.$Modal.confirm({
                        title: `你确定要删除吗`,
                        onOk: () => {
                            deleteItem({
                                ids: item.ID
                            }).then(res => {
                                if (res.state == 'success') {
                                    this.$Message.success(res.message)
                                    // this.allSelectArr = '';
                                } else {
                                    this.$Message.error(res.message)
                                }
                                this.getTablesListData()
                            })
                        },
                        onCancel: () => {
                            this.$Message.info('取消成功')
                        }
                    })
                } else {
                    this.$Message.error('请先选择需要操作的记录')
                }
            }
        },
        handleGoUser(data) {
            this.$router.push({
                path: `/organization-user/${data.ID}/${data.CompanyID}`
            })
        },
        handleGoDepartment(data) {
            this.$router.push({
                path: `/organization-department/${data.ID}`
            })
        },
        /* 表单数据 */
        initFormItem() {
            return {
                IsTop: 'true',
                IsFlash: 'true',
                InMain: 'true',
                Picture: '',
                ViewCount: 0,
                imgh: 0,
                imgw: 0
            }
        },
        /* 表单校验 */
        initRuleValidate() {
            return {
                Title: [
                    {
                        required: true,
                        message: '请输入新闻名称',
                        trigger: 'change'
                    }
                ]
            }
        }
    }
}
</script>

<style lang = 'less' scoped>
.box {
    width: 100%;
    height: 100%;
    /* overflow: auto; */
}
.table-top-wrap {
    padding: 20px;
}
.table-container {
    margin: 0;
    padding: 0;
    width: 100%;
    height: 85%;
    /* border: 1px solid #ccc; */
    /* padding-bottom: 20px; */
    overflow-x: auto;
    overflow-y: auto;
}
.imglist {
    width: 100%;
    overflow: auto;
}
.imglist ul li {
    float: left;
    margin: 0 0 18px 80px;
    min-width: 220px;
}
.imglist ul li .details {
    position: relative;
    border: 1px solid #eee;
    box-shadow: 0 0 3px 0 rgba(0, 0, 0, 0.1);
    background: #fff;
}
.imglist ul li .details .check {
    position: absolute;
    top: 0px;
    right: 0px;
    padding: 5px;
    border-left: 1px solid #eee;
    border-bottom: 1px solid #eee;
    background: #fff;
}
.imglist ul li .details .pic {
    width: 100%;
    height: 165px;
    overflow: hidden;
}
.imglist ul li .details .absbg {
    position: absolute;
    left: 0px;
    top: 95px;
    width: 100%;
    height: 70px;
    background: #000;
    filter: alpha(opacity=20);
    opacity: 0.2;
}
.imglist ul li .details h1 {
    position: absolute;
    display: block;
    padding: 10px 20px;
    left: 0px;
    top: 95px;
    right: 0;
    height: 50px;
    /* border-bottom: 1px solid #eee; */
}
.imglist ul li .details h1 span {
    display: block;
    color: #fff;
    font-size: 14px;
    font-weight: bold;
    height: 50px;
    line-height: 25px;
    text-overflow: ellipsis;
    overflow: hidden;
}
.imglist ul li .details h1 span a {
    color: #fff;
    text-decoration: none;
}
.imglist ul li .details .remark {
    display: block;
    margin: 10px 15px;
    padding: 0;
    height: 80px;
    color: #666;
    font-size: 12px;
    line-height: 20px;
    text-overflow: ellipsis;
    overflow: hidden;
}

.imglist ul li .details .tools {
    display: block;
    position: relative;
    padding: 0 15px;
}
.imglist ul li .details .foot {
    clear: both;
    display: block;
    padding: 10px 15px;
    height: 40px;
}
.imglist ul li .details .foot .time {
    float: left;
    color: #838383;
    font-size: 14px;
    line-height: 25px;
}
.imglist ul li .details .foot .edit {
    display: block;
    float: right;
    margin: 0 0 0 3px;
    padding: 0;
    width: 20px;
    height: 20px;
    text-indent: -9999em;
    /* background: url(../skin/skin_icons.png) no-repeat -137px -81px; */
    overflow: hidden;
}
</style>
<style scoped>
.box >>> .ivu-card-body {
    padding: 5px 16px !important;
}
.box >>> .ivu-card {
    height: 300px !important;
}
</style>